<template>
  <div class="right">
    <h2 class="module-title">快捷编辑</h2>
    <div v-for="(item, i) in pageData" :key="i">
      <div class="item-con" @click="toggleShowDrawer(i)">
        {{ i + 1 }}、{{ item.title }}
        <div class="item-icon">
          <span @click.stop="up(i)" class="iconfont icon-ToTop"></span>
          <span @click.stop="down(i)" class="iconfont icon-ToBottom"></span>
          <span @click.stop="del(item,i)" class="iconfont icon-shanchu"></span>
        </div>
      </div>
    </div>
    <rightDrawer :toggleShowDrawer="toggleShowDrawer" :editIndex="editIndex" />
  </div>
</template>

<script>
import RightDrawer from "./RightDrawer";
export default {
  name: "right",
  components: {
    RightDrawer,
  },
  props: {},
  data() {
    return {
      editIndex: -1,
    };
  },
  methods: {
    toggleShowDrawer(index) {
      this.editIndex = index;
    },
    del(item,index) {
      const self = this;
      this.$confirm("是否移除组件")
        .then((res) => {
          this.$http.post("/pageData/delete",{
            id : item.id
          }).then((res) => {
              if(res.success){
                let arr = this.$utils.deepCopy(this.pageData);
                arr.splice(index, 1);
                this.upDatePage(arr);
              }
          })
         
        })
        .catch((e) => {});
    },
    upDatePage(pageData) {
      if(!pageData) return ;
      if(pageData.length === 0){
        this.$store.commit("CONFIG_SET", { pageData: pageData });
        return
      }
      this.$http.post("/pageData/update", {
          ids: pageData.map(v => v.id).join(","),
      }).then((res) => {
          if (res.success) {
            this.$message({
              message: "更新成功",
              type: "success",
            });
            this.$store.commit("CONFIG_SET", { pageData: pageData });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    up(index) {
      if (index === 0) {
        this.$message("已经到顶了");
        return;
      }
      console.log(index)
      const pageData = this.$utils.upData(this.pageData, index);
      this.upDatePage(pageData);
    },
    down(index) {
      if (index === this.pageData.length - 1) {
        this.$message("已经到底了");
        return;
      }
      console.log(index)
      const pageData = this.$utils.downData(this.pageData, index);
      this.upDatePage(pageData);
    },
  },
  computed: {
    pageData() {
      return this.$store.state.config.data.pageData;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.right {
  width: 300px;

  .item-con {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    background: #f5f5f5;
    padding: 0 10px;
    border-radius: 5px;
    margin-bottom: 10px;
    border: 1px solid #eee;

    &:hover {
      border: 1px solid #ddd;
    }

    .item-icon {
      color: #999;

      .iconfont:hover {
        color: #ef1f1f;
        cursor: pointer;
      }
    }
  }
}
</style>
